/******************** 变量 ********************/
$lv-spinner-border-color: $border-color-base;
$lv-spinner-space: $space-base;

/******************** 组件 ********************/
.lv-spinner {
  display: inline-block;
  width: 1.76rem;
  height: $height-base;
  border-width: $border-width-base;
  border-style: $border-style-base;
  border-color: $lv-spinner-border-color;
  border-radius: $border-radius-md;
  transition: border-color 0.2s;
  font-size: $font-size-base;
  line-height: $line-height-base;
  font-family: $font-family;
  color: $text-color;

  @include input-help-tooltip($margin-xl * 2);

  &-size-large {
    height: $height-lg;
  }

  &:not(&-disabled) {
    &:hover {
      border-color: $border-color-hover;
    }
    &:active {
      border-color: $border-color-active;
    }
    &.lv-spinner-focus {
      border-color: $border-color-active;
    }
  }

  > lv-group {
    height: 100%;
    * {
      border-radius: $border-radius-none;
      &:first-child {
        border-top-left-radius: $border-radius-md;
        border-bottom-left-radius: $border-radius-md;
      }
      &:last-child {
        border-top-right-radius: $border-radius-md;
        border-bottom-right-radius: $border-radius-md;
      }
    }
  }

  &-disabled {
    color: $text-color-disabled;
    border-color: $border-color-disabled;
    cursor: not-allowed;
  }

  &-button {
    display: flex;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
    position: relative;
    border: none;

    .lv-icon-host {
      width: $lv-spinner-space * 4; // 兼容ie浏览器
      height: $lv-spinner-space * 4; // 兼容ie浏览器
    }

    &.lv-button.lv-button-type-link {
      padding: 0 $padding-sm;
      color: $icon-color;
      &:hover {
        color: $icon-color-hover;
      }
      &:active {
        color: $icon-color-active;
      }
    }
    &.lv-button.lv-button-size-auto {
      height: 100%;
    }
    &:disabled,
    &[disabled],
    &.lv-button.lv-button-type-link:not(.lv-button-loading):disabled,
    &.lv-button.lv-button-type-link:not(.lv-button-loading)[disabled] {
      color: $icon-color-disabled;
      &::after {
        background-color: $spinner-separate-line-disabled-color;
      }
    }
  }

  &-plus-button {
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: -0.01rem;
      width: 0.01rem;
      height: $lv-spinner-space * 4;
      margin-top: -$margin-sm;
      background-color: $spinner-separate-line-color;
    }
  }

  &-input {
    &.lv-input.lv-input-size-default {
      width: calc(100% - 0.64rem); // 兼容低版本firefox
      height: 100%;
      padding: 0 $margin-sm;
      text-align: left;
      border: none;
      outline: none;
    }
  }

  &.lv-spinner-inputnumber {
    .lv-spinner-input {
      &.lv-input.lv-input-size-default {
        width: 100%;
        margin-left: 0;
        text-align: left;
      }
    }
  }

  &.lv-spinner-disabled {
    .lv-spinner-button {
      &:disabled,
      &[disabled],
      &.lv-button.lv-button-type-link:not(.lv-button-loading):disabled,
      &.lv-button.lv-button-type-link:not(.lv-button-loading)[disabled] {
        background: $disabled-background;
      }
    }
  }
}

.lv-group-row > .lv-group-border-overlap.lv-spinner-button,
.lv-group-row > .lv-group-border-overlap.lv-spinner-input {
  margin-right: 0;
}
